<template>
  <div class="main">
    <div class="container">
      <div class="container-left">
        <div class="container-top">
          <div class="top">
            <div class="title">申报项目审核</div>
          </div>
          <div class="contentTitle">
            <p>{{ details.declare_name }}</p>
          </div>
        </div>
        <div class="content">
          <div class="item">
            <p>项目负责人</p>
            <p>
              <span v-for="(item, index) in principalData" :key="index">{{
                item.real_name + "  "
              }}</span>
              <span class="chakan" @click="principalDialogVisible = true"
                >查看基础资料</span
              >
            </p>
          </div>
          <div class="item">
            <p>团队主要成员</p>
            <p>
              <span v-for="(item, index) in membersData" :key="index">{{
                item.real_name + "   "
              }}</span>
              <span class="chakan" @click="membersDialogVisible = true"
                >查看基础资料</span
              >
            </p>
          </div>
          <div class="item">
            <p>申报项目类型</p>
            <p>在线课程</p>
          </div>
          <!-- 自定义字段 -->
          <div class="item" v-for="(item, index) in details.meta" :key="index">
            <p>{{ item.field_name }}</p>
            <p
              class="item-content"
              v-if="item.fields_value.indexOf('http') != -1"
            >
              <a :href="ele" v-for="ele in item.fields_value.split(' ')">{{
                ele
              }}</a>
            </p>
            <p v-else class="item-content">{{ item.fields_value }}</p>
          </div>
          <div class="item file">
            <p>申报附件</p>
            <div>
              <div
                class="file-item"
                v-for="(item, index) in details.attach"
                :key="index"
              >
                <p>附件名称：{{ item.attach_name }}</p>
                <div class="preview">
                  <div class="img">
                    <img
                      :src="
                        item.type === '1'
                          ? require('../../../assets/images/file.png')
                          : item.type === '2'
                          ? require('../../../assets/images/vedio.png')
                          : item.type === '3'
                          ? require('../../../assets/images/zip.png')
                          : require('../../../assets/images/pic.png')
                      "
                      alt=""
                    />
                  </div>
                  <div class="details">
                    <p class="title">{{ item.attach_name }}</p>
                    <p>
                      <span
                        >{{
                          (item.attach_size / 1024 / 1024).toFixed(2)
                        }}M</span
                      ><span>{{
                        item.type === "1" ? "文档文件" : "视频文件"
                      }}</span>
                    </p>
                  </div>
                  <div class="preview-btn">
                    <div
                      v-if="item.type != '3'"
                      class="look"
                      @click="handlePreview(item.attach_id, item.type)"
                    >
                      <img src="@/assets/images/look.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <p>状态</p>
            <p>{{ details.status_show }}</p>
          </div>
          <div class="footer">
            <el-button icon="iconfont icon-guanbi" class="close" @click="back"
              >取消</el-button
            >
            <el-button
              class="tongguo"
              @click="onApproved"
              v-if="details.status === '2'"
              ><img src="@/assets/images/shenhe.png" />审核通过</el-button
            >
            <el-button
              class="sumbit"
              @click="onReview"
              v-if="details.status === '3'"
              ><img src="@/assets/images/fushen.png" />上报市级</el-button
            >
            <el-button
              class="tuihui"
              @click="centerDialogVisible = true"
              v-if="details.status === '2'"
              ><img src="@/assets/images/tuihui.png" />退回</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="退出原因"
      :visible.sync="centerDialogVisible"
      width="40%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-form :model="reasonForm" ref="reasonForm">
        <el-input
          type="textarea"
          v-model="reasonForm.cause"
          placeholder="单行输入"
        ></el-input>
        <el-form-item>
          <el-button
            icon="iconfont icon-guanbi"
            class="close"
            @click="centerDialogVisible = false"
            >取消</el-button
          >
          <el-button class="tuihui" @click="onSendBack"
            ><img src="@/assets/images/entry.png" />确定退回</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="团队负责人"
      :visible.sync="principalDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-table :data="principalData" border style="width: 100%">
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="姓名"> </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="yuanxi" label="院系"> </el-table-column>
        <el-table-column prop="zhiwu" label="职务"> </el-table-column>
        <el-table-column prop="zhicheng" label="职称"> </el-table-column>
        <el-table-column prop="renwu" label="承担任务"> </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button
          icon="iconfont icon-guanbi"
          class="close"
          @click="principalDialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="团队主要成员"
      :visible.sync="membersDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-table :data="membersData" border style="width: 100%">
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="姓名"> </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="yuanxi" label="院系"> </el-table-column>
        <el-table-column prop="zhiwu" label="职务"> </el-table-column>
        <el-table-column prop="zhicheng" label="职称"> </el-table-column>
        <el-table-column prop="renwu" label="承担任务"> </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button
          icon="iconfont icon-guanbi"
          class="close"
          @click="membersDialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <template v-if="FiledialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="FiledialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="FileScreen"
        :before-close="FilehandleClose"
      >
        <i class="el-icon-rank" @click="onFileFullScreen"></i>
        <div class="mask"></div>
        <iframe
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          frameborder="0"
          style="width: 100%; height: 100%"
        >
        </iframe>
      </el-dialog>
    </template>
    <template v-if="VideodialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="VideodialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="VideoScreen"
        :before-close="VideohandleClose"
      >
        <i class="el-icon-rank" @click="onVideoFullScreen"></i>
        <video
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          controls="controls"
        ></video>
        <!-- <iframe :src="
          'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
          attachId +
          '&token=' +
          token
        " 
        frameborder="0" 
        style="width: 100%; height: 100%">
        </iframe> -->
      </el-dialog>
    </template>
    <template v-if="PicdialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="PicdialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="PicScreen"
        :before-close="PichandleClose"
      >
        <i class="el-icon-rank" @click="onPicFullScreen"></i>
        <img
          width="100%"
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          alt=""
        />
      </el-dialog>
    </template>
  </div>
</template>
<script>
import { SchoolDeclareDetails, DeclareCheck } from "@/api/login";
export default {
  name: "ShenBaoDetails",
  data() {
    return {
      reasonForm: {
        cause: "",
      },
      // 文件预览
      FileYulan: false,
      FileScreen: false,
      VideoScreen: false,
      PicScreen: false,
      FiledialogVisible: false,
      VideodialogVisible: false,
      PicdialogVisible: false,
      // 弹窗
      centerDialogVisible: false,
      membersDialogVisible: false,
      principalDialogVisible: false,
      principalData: [],
      membersData: [],
      token: "",
      declareid: "",
      projectid: "",
      details: "",
      // 项目
      type: "1",
      // 审核状态
      status: "",
      attachId: "",
      Showbg: false,
    };
  },
  methods: {
    handlePreview(attach_id, type) {
      this.attachId = attach_id;
      if (type === "1") {
        this.FiledialogVisible = true;
      } else if (type === "2") {
        this.VideodialogVisible = true;
      } else {
        this.PicdialogVisible = true;
      }
    },
    FilehandleClose() {
      this.FiledialogVisible = false;
    },
    VideohandleClose() {
      this.VideodialogVisible = false;
    },
    PichandleClose() {
      this.PicdialogVisible = false;
    },
    onFileFullScreen() {
      this.FileScreen = !this.FileScreen;
    },
    onVideoFullScreen() {
      this.VideoScreen = !this.VideoScreen;
    },
    onPicFullScreen() {
      this.PicScreen = !this.PicScreen;
    },
    backgroundShow() {
      this.$emit("backgroundShow", this.Showbg);
    },
    allProject() {
      this.type = "1";
      this.$router.push({
        path: "/school-shenbao",
        query: {
          type: this.type,
          project_id: this.projectid,
        },
      });
    },
    reviewProject() {
      this.type = "2";
      this.$router.push({
        path: "/school-shenbao",
        query: {
          type: this.type,
          project_id: this.projectid,
        },
      });
    },
    hasProject() {
      this.type = "3";
      this.$router.push({
        path: "/school-shenbao",
        query: {
          type: this.type,
          project_id: this.projectid,
        },
      });
    },
    // 审核通过
    onApproved() {
      this.status = "1";
      this.queryDeclareCheck();
    },
    // 提交复审
    onReview() {
      this.status = "2";
      this.queryDeclareCheck();
    },
    // 退回
    onSendBack() {
      this.centerDialogVisible = false;
      this.status = "3";
      this.queryDeclareCheck();
    },
    // 申报项目详情
    querySchoolDeclareDetails() {
      SchoolDeclareDetails({
        token: this.token,
        declare_id: this.declareid,
      }).then((result) => {
        const { data } = result;
        this.details = data;
        data.teamers.forEach((item) => {
          if (item.type_id === "1") {
            this.principalData.push(item);
          } else {
            this.membersData.push(item);
          }
        });
        if (result.msg === "数据不存在") {
          this.$router.push({
            path: "/dataError",
          });
        } else if (result.msg === "项目已过期") {
          this.$router.push({
            path: "/overdueError",
          });
        }
        if (result.code === -1) {
          this.$router.push({
            path: "/rootError",
          });
        }
      });
    },
    // 申报项目审核
    queryDeclareCheck() {
      DeclareCheck({
        token: this.token,
        declare_id: this.declareid,
        status: this.status,
        remark: this.reasonForm.cause,
      }).then((result) => {
        if (result.code === 1) {
          this.$message({
            message: "执行成功",
            type: "success",
          });
          this.$router.push({
            path: "/school-shenbao",
            query: {
              project_id: this.projectid,
            },
          });
          this.reasonForm.cause = "";
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
  created() {
    this.backgroundShow();
  },
  mounted() {
    const token = sessionStorage.getItem("token");
    const declareid = this.$route.query.declare_id;
    const projectid = this.$route.query.project_id;
    this.token = token;
    this.declareid = declareid;
    this.projectid = projectid;
    this.querySchoolDeclareDetails();
  },
};
</script>
<style lang='scss' scoped>
img {
  width: 100%;
  height: 100%;
}
.main {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  color: #242748;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  margin: 0 50px 20px 30px;
  text-align: left;
  font-family: "PingFang";
  .container {
    height: 980px;
    overflow-y: auto;
    & > div {
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
    }
    .container-right {
      height: auto;
    }
    .preview {
      width: 50% !important;
      .details {
        width: 82% !important;
      }
    }
  }
  .container-left {
    width: 770px;
  }
  .container-top {
    .top {
      display: flex;
      margin-bottom: 30px;
      .title {
        font-size: 26px;
        font-family: "黑体";
        color: #5673ff;
        margin-right: 60px;
      }
      .column {
        display: flex;
        font-size: 16px;
        .item {
          display: flex;
          align-items: center;
          padding-right: 20px;
          cursor: pointer;
          img {
            width: 15px;
            height: 15px;
            margin-right: 12px;
          }
        }
      }
    }
    .contentTitle {
      font-size: 22px;
      color: #242748;
      line-height: 32px;
      font-weight: 700;
      p {
        font-weight: 700;
      }
    }
  }
  .container-top {
    padding: 33px 45px 25px;
    border-bottom: solid 1px #e7e9eb;
  }
  /deep/.el-button {
    padding: 8px 15px 8px 20px;
    color: #fff;
    padding: 0;
    /deep/i {
      margin-right: 8px;
      vertical-align: bottom;
    }
  }
  .content {
    position: relative;
    padding: 40px;
    height: 800px;
    overflow-y: auto;
    font-size: 18px;
    .item {
      display: flex;
      margin-bottom: 60px;
      .chakan {
        display: inline-block;
        margin-left: 30px;
        font-size: 12px;
        padding: 2px 10px;
        color: #fff;
        vertical-align: middle;
        border-radius: 5px;
        background-color: #69a1ff;
        border: solid 1px #4d8df7;
      }
      & > p:first-child {
        width: 200px;
      }
      & > p:nth-child(2),
      & > div {
        width: calc(100% - 200px);
      }
      & > p {
        line-height: 25px;
        a {
          margin-right: 30px;
          color: blue;
          text-decoration: underline;
          word-wrap: break-word;
        }
      }
      &:last-of-type {
        margin-bottom: 0;
      }
      .file-item {
        margin-bottom: 30px;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    .file {
      margin-bottom: 40px;
    }
    .preview {
      display: flex;
      align-items: center;
      width: 85%;
      margin: 20px 0 15px;
      padding: 20px 22px;
      background-color: #f4f7fc;
      border-radius: 5px;
      .img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        img {
          border-radius: 2px;
        }
      }
      .details {
        width: 75%;
        margin: 0 0 0 20px;
        .title {
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #242748;
          font-size: 14px;
          font-weight: 700;
        }
        p {
          line-height: 22px;
          font-size: 12px;
          color: #a1a4b5;
          span {
            margin-right: 10px;
          }
        }
      }
      .preview-btn {
        & > div {
          float: left;
          width: 18px;
          height: 18px;
          margin-left: 18px;
        }
        .del {
          width: 16px;
        }
      }
    }
    .middle {
      height: 40px;
    }
  }
  /deep/.close {
    border: solid 1px #e7e9eb;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.14);
    color: #242748;
  }
  /deep/.tongguo {
    background-color: #5673ff;
    border: solid 1px #2d4eff;
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
  }
  /deep/.tuihui {
    border: solid 1px rgb(77, 141, 247);
    background-color: rgb(105, 161, 255);
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
  }
  /deep/.sumbit {
    border: solid 1px rgb(61, 178, 245);
    background-color: rgb(61, 178, 245);
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
  }
  /deep/.tongguo,
  /deep/.close,
  /deep/.tuihui,
  /deep/.sumbit {
    padding: 8px 15px 8px 20px;
    font-size: 14px;
    font-family: "PingFang";
    letter-spacing: 1px;
    margin-right: 30px;
    img {
      margin-right: 8px;
      width: 18px;
      height: 16px;
      vertical-align: middle;
    }
    i {
      margin-right: 8px;
      vertical-align: middle;
    }
  }
  /deep/.el-textarea {
    height: 300px;
    margin-bottom: 25px;
    .el-textarea__inner {
      height: 100%;
      font-size: 20px;
      color: #9d9fa2;
      font-family: "PingFang";
      outline: none;
      resize: none;
    }
  }
  /deep/.table {
    border-radius: 20px;
    .cell {
      font-size: 16px;
    }
    .el-dialog__title {
      font-family: "黑体";
      font-size: 28px;
      color: #5673ff;
    }
    .el-dialog__header {
      padding: 30px 0 20px;
    }
    .dialog-footer {
      text-align: center;
    }
    .el-button {
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
    .el-table {
      margin-bottom: 30px;
    }
    .el-dialog__body {
      padding-top: 0 !important;
    }
  }
  /deep/.filePreview {
    height: 100%;
    i {
      font-size: 20px;
    }
    .mask {
      position: absolute;
      width: 17%;
      height: 56px;
      right: 1.5%;
      background-color: #323639;
    }
    .el-dialog__header {
      padding: 0.25rem 0.25rem 0.125rem;
    }
    .el-dialog__body {
      padding-top: 0 !important;
      height: 90%;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .el-icon-rank {
      position: absolute;
      right: 3%;
      top: 0.27rem;
      font-size: 16px !important;
      color: #909399;
    }
  }
  /deep/.el-form-item {
    margin-bottom: 0;
  }
  /deep/.el-form-item__content {
    text-align: center;
  }
  /deep/.el-button {
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>